<template>
	<sw-common-frame class="table" :loading="loading">
		<template slot="button" v-if="isExistButton">
			<el-button size="small" type="primary" v-hasPermi="addedButton" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline v-if="isExistQuery">
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="菜单名称" style="width: 200px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableListData" v-bind="treeTableConfig" @row-click="handleRowExpanded">
			<el-table-column label="菜单名称" min-width="238" show-overflow-tooltip :formatter="returnMenuIconName" />
			<el-table-column label="类型" width="72" align="center">
				<template slot-scope="{ row }">
					<template v-if="row.menuLevel !== '4'"><el-tag type="success" size="small">菜单</el-tag></template>
					<template v-if="row.menuLevel === '4'"><el-tag type="warning" size="small">按钮</el-tag></template>
				</template>
			</el-table-column>
			<el-table-column label="菜单路径" min-width="248" show-overflow-tooltip :formatter="returnMenuPathOrId" />
			<el-table-column label="状态" width="64" align="center">
				<template slot-scope="{ row }">
					<template v-if="row.del === '1'"><el-tag type="success" size="small">正常</el-tag></template>
					<template v-if="row.del === '2'"><el-tag type="danger" size="small">禁用</el-tag></template>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="sort" width="64" align="center"></el-table-column>
			<el-table-column label="创建时间" prop="createTime" width="170"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="left" align="right" :width="handleWidth" v-if="isHasAuthButton">
				<template slot-scope="{ row }">
					<template v-if="row.menuLevel !== '4'">
						<el-button type="text" v-hasPermi="handleButtons.addSub" @click.stop="handleAddChildren(row)">添加子级</el-button>
					</template>
					<el-button type="text" v-hasPermi="handleButtons.update" @click.stop="handleOpenDialog(row.id)">修改</el-button>
					<el-button type="text" v-hasPermi="handleButtons.delete" @click.stop="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="menuListData" :child.sync="isChildren" @refresh="queryTableData()" />
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import { mapGetters } from 'vuex';
import listMixins from '@/mixins/listMixins';
import { getMenuTree, deleteMenu } from '@/api/system/tbSysMenu';
export default {
	name: 'menuPage',
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '菜单',
			isChildren: false,
			queryName: '',
			checkedMenu: null
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		listFunction() {
			return eval(getMenuTree);
		},
		deleteFunction() {
			return eval(deleteMenu);
		},
		treeTableConfig() {
			let config = { ...this.tableConfig };
			config['treeProps'] = { children: 'childList', hasChildren: 'hasChildren' };
			config['expandedRowKeys'] = [];
			return { ...config, rowKey: 'id' };
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			return frameTopBtns;
		},
		requestParams() {
			return { pId: 0 };
		},
		menuListData() {
			let menuArr = this.$treeToFlat(this.tableData, 'childList');
			let menuNoButton = menuArr.filter((item) => item.menuLevel !== '4');
			return this.$flatToTree(menuNoButton, 'pid');
		},
		tableListData() {
			let name = this.queryName.toLowerCase();
			let filterTreeData = (nodes) => {
				let filtered = [];
				nodes.forEach((node) => {
					if (node.name.toLowerCase().includes(name)) {
						let child = node.children ? filterTreeData(node.children) : [];
						filtered.push({ ...node, children: !child.length ? [] : child });
					} else if (node.children) {
						let children = filterTreeData(node.children);
						children.length && filtered.push({ ...node, children });
					}
				});
				return filtered;
			};
			return filterTreeData(this.tableData);
		}
	},
	watch: {
		queryName() {
			this.$refs['table'].doLayout();
		},
		tableListData(arr) {
			const findNode = (nodes) => {
				nodes.forEach((node) => {
					if (node.childList.length > 0 && !lodash.some(node.childList, { menuLevel: '4' })) {
						this.$refs['table'].toggleRowExpansion(node, true);
						findNode(node.childList || []);
					}
				});
			};
			this.$nextTick(() => findNode(arr));
		}
	},

	methods: {
		//返回菜单图标名称
		returnMenuIconName(row) {
			return this.$createElement('i', { class: ['menu_icon', row.icon] }, row.name);
		},

		//返回菜单路径或ID
		returnMenuPathOrId(row) {
			return row.menuLevel !== '4' ? row.url : row.id;
		},

		//查询菜单
		handleQueryData() {
			this.queryName = lodash.cloneDeep(this.queryData.name);
		},

		updateStoreData() {
			this.$store.dispatch('getPermissionMenu');
		}
	}
};
</script>
<style lang="scss" scoped>
.menu_icon {
	line-height: 1;
	font-size: 15px;
	font-style: normal;
	&::before {
		margin-right: 6px;
	}
}
</style>
